<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>AiHome</title>  
    <style>  
        html, body {  
            margin: 0;  
            padding: 0;  
            height: 100%;  
            overflow: hidden; /* 隐藏任何溢出的内容 */  
        }  
.container{
			width: 100%;
			height: 100%;
		} 
        video {  
            position: absolute; /* 定位到页面左上角 */  
            top: 0;  
            left: 0;  
            width: 100%; /* 宽度为容器宽度的 100% */  
            height: 100%; /* 高度为容器高度的 100% */  
            object-fit: cover; /* 保持视频的宽高比，同时填充整个容器 */  
        } 

        /* 如果需要，可以在这里添加隐藏控制条的样式 */  
        video::-internal-media-controls {  
            display: none !important;  
        }  
        video::-webkit-media-controls {  
            display: none !important;  
        } 

#torch {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: pointer;
}

	
    </style>  
       <script src="jquery-3.2.1.min.js"></script>
	<script src="jquery.ripples-min.js"></script>
</head>  
<body>  
    <video id="myVideo" width="1024" height="768" autoplay loop muted playsinline>  
        <source id="wallpaper" src="../example.mp4" type="video/mp4">
        Your browser does not support the video tag.  
    </video>
    <script>
        function changePapper(filename){
            document.getElementById('wallpaper').src=filename;
            document.getElementById('myVideo').load();
            document.getElementById('myVideo').play();
        }
    </script>

	  <canvas id="torch"></canvas>
<script>
/**
 * Cross-browser wrapper for function "requestAnimationFrame"
 */
window.requestAnimFrame = (function() {
    return window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 60);
        };
})();

(function() {
    var cnv = document.querySelector("#torch");
    cnv.width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    cnv.height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    var ctx = cnv.getContext("2d");
    var mouse = {
        x: cnv.width / 2,
        y: cnv.height / 2
    };
    var flames = [];

    /**
     * Flame shapes constructor
     */
    var Flame = function() {
        function flame() {
            this.radius = 10;
            this.delete = false;
            this.position = {
                x: mouse.x + ((Math.random() > 0 ? 1 : -1) * Math.random() * 5),
                y: mouse.y
            };
        }

        flame.prototype.Draw = function(ctx) {
            if (this.radius > 0) {
                ctx.beginPath();
                ctx.fillStyle = "rgb(256," + (250 - this.radius * 12) + ",0)";
                ctx.arc(this.position.x, this.position.y - 3 - 30 + this.radius * 3, this.radius, 0, Math.PI * 2, true);
                ctx.closePath();
                ctx.fill();

                this.radius--;
            } else {
                this.delete = true;
            }
        };

        return new flame();
    };


    /**
     * Update mouse coordinates on moving
     */
    document.addEventListener('mousemove', function(event) {
        mouse.x = event.clientX;
        mouse.y = event.clientY;
    });

    /**
     * Redraw canvas
     */
    function Update() {
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

        // Draw background
        //ctx.beginPath();
        //ctx.fillStyle = "#000";
        //ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
        //ctx.closePath();
        //ctx.fill();

        // Draw highlight
        //var grad = ctx.createRadialGradient(mouse.x, mouse.y, 0, mouse.x, mouse.y, 200);
        //grad.addColorStop(0, "#310");
        //grad.addColorStop(1, "#000");
        //ctx.beginPath();
        //ctx.arc(mouse.x, mouse.y, 200, 0, Math.PI * 2, true);
        //ctx.fillStyle = grad;
        //ctx.closePath();
        //ctx.fill();

        // Draw flames
        for (var i = 0; i < flames.length; i++) {
            if (flames[i].delete) {
                flames.splice(i, 1);
                flames.push(new Flame());
            } else {
                flames[i].Draw(ctx);
            }
        }

        window.requestAnimFrame(Update);
    }

    // Start drawing
    for (var i = 0; i < 10; i++) {
        flames[i] = new Flame();
    }
    Update();
}());
</script>


</body>  
</html>